import { useState } from "react";
import style from "./index.module.scss";
import bg from "@/assets/images/annual-festival-1/bg.png";

import Content from "./content/index";
import Reward from "./reward";
import Rule from "./rule";
import classNames from "classnames";
const Index = () => {
  const [showPage, setShowPage] = useState(0);
  return (
    <>
      {
        <div
          className={classNames(style.container, {
            [style.disScroll]: showPage === 1 || showPage === 2,
          })}
        >
          <img src={bg} alt="背景图" />
          <div
            className={`${style.btn} ${style.btn1}`}
            onClick={() => setShowPage(1)}
          >
            {/* 奖励 */}
          </div>
          <div
            className={`${style.btn} ${style.btn2}`}
            onClick={() => setShowPage(2)}
          >
            {/* 规则 */}
          </div>
          <Content type={1} />
        </div>
      }
      {showPage === 1 && <Reward setShowPage={() => setShowPage(0)} />}
      {showPage === 2 && <Rule setShowPage={() => setShowPage(0)} />}
    </>
  );
};

export default Index;
